<template>
  <div
    class="eum-nav-icon"
    :class="isActive ? 'active' : ''"
    @click="setIconActive"
  >
    <text></text>
    <text></text>
    <text></text>
  </div>
</template>

<script>
export default {
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    setIconActive() {
      this.$emit("update:isActive", true)
    },
  },
}
</script>

<style lang="scss">
.eum-nav-icon {
  display: flex;

  border-radius: 10px;
  width: 40px;
  height: 40px;

  background: #ecf0f3;

  box-shadow: -12px -12px 30px 5px rgba(255, 255, 255, 0.9),
    12px 12px 30px 5px rgba(50, 58, 73, 0.2);

  align-items: center;
  flex-direction: column;
  justify-content: center;
  text {
    margin: 4rpx 0;
    border-radius: 4px;
    width: 20px;
    height: 4rpx;

    background-color: lightcoral;

    box-shadow: 0 0 20rpx 0 rgba(240, 128, 128, 0.3);

    transition: margin 0.4s cubic-bezier(0.79, 0.21, 0.06, 0.81),
      transform 0.4s cubic-bezier(0.79, 0.21, 0.06, 0.81);
    &:nth-child(2) {
      transform-origin: 50% 50%;
    }
  }
  &.active {
    background: #e0e5ec;

    box-shadow: inset -12px -12px 30px 5px rgba(255, 255, 255, 0.9),
      inset 12px 12px 30px 5px rgba(50, 58, 73, 0.2);
    text {
      margin: -2rpx;
      &:nth-child(1) {
        transform: rotate(-45deg);
      }
      &:nth-child(2) {
        transform: scale(0);
      }
      &:nth-child(3) {
        transform: rotate(45deg);
      }
    }
  }
}
</style>
